<template>
    <view class="content">
        <!-- 空白页 -->
        <empty v-if="goodsList.length == 0"></empty>
        <view v-if="goodsList.length > 0">
            <view class="goods-list">
                <view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
                    <view class="image-wrapper" style="position:relative">
                        <image :src="item.main_image" mode="aspectFill"></image>
                        <text class="del-btn yticon icon-fork" style="position:absolute;right:10rpx;top:2rpx"
                            @click.stop="del(index, item)"></text>
                    </view>
                    <text class="title clamp">{{ item.name }}</text>
                    <view class="price-box">
                        <text class="price">{{ item.min_price }}</text>
                        <text>已售 {{ item.sales }}</text>
                    </view>
                </view>
            </view>
            <uni-load-more :status="more"></uni-load-more>
        </view>
    </view>
</template>

<script>
import empty from "@/components/empty";
export default {
    components: {
        empty,
    },
    data() {
        return {
            goodsList: [],
            options: [],
            triggered: false,
            has_more: true,
            more: "more",
            page: 1,
        };
    },
    onPageScroll(e) {
        //兼容iOS端下拉时顶部漂移
        if (e.scrollTop >= 0) {
            this.headerPosition = "fixed";
        } else {
            this.headerPosition = "absolute";
        }
    },
    async onPullDownRefresh() {
        this.page = 1;
        await this.loadData()
        // 数据更新后，停止下拉刷新动画，关闭下拉刷新
        uni.stopPullDownRefresh();
    },
    async onReachBottom() {
        if (this.has_more) {
            this.page++;
            await this.loadData()
        }
    },
    async onLoad(options) {
        // #ifdef H5
        this.headerTop =
            document.getElementsByTagName("uni-page-head")[0].offsetHeight + "px";
        // #endif
        this.options = options;
        await this.loadData();
    },
    methods: {
        async loadData() {
            let { data } = await this.$http.user.browserPage({
                ...this.options,
                ...{
                    pageNo: this.page,
                }
            });
            this.goodsList = [...this.goodsList, ...data.records];
            this.has_more = data.has_more;
            if (!this.has_more) {
                this.more = "noMore"
            }
        },
        async refresh() {
            if (!this.triggered) {
                this.triggered = true;
                setTimeout(async () => {
                    this.page = 1;
                    this.goodsList = [];
                    await this.loadData();
                    this.triggered = false;
                }, 500)
            }
        },
        lowerData() {
            if (!this.has_more) {
                return;
            }
            setTimeout(async () => {
                this.page++;
                await this.loadData();
                this.triggered = false;
            }, 500)
        },
        del(index,item) {
            uni.showModal({
                content: "确认删除当前浏览记录吗？",
                success: async (e) => {
                    if (e.confirm) {
                        await this.$http.user.deleteBrowser({
                            goods_id: item.id
                        });
                        this.goodsList.splice(index, 1)
                        uni.hideLoading();
                    }
                },
            });
        },
        //详情
        navToDetailPage(item) {
            uni.navigateTo({
                url: `/pages/product/product?id=${item.id}`,
            });
        },
    },
};
</script>

<style lang="scss">
page,
.content {
    background: $page-color-base;
}

/* 商品列表 */
.goods-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30upx;
    background: #fff;

    .goods-item {
        display: flex;
        flex-direction: column;
        width: 48%;
        padding-bottom: 40upx;

        &:nth-child(2n + 1) {
            margin-right: 4%;
        }
    }

    .image-wrapper {
        width: 100%;
        height: 330upx;
        border-radius: 3px;
        overflow: hidden;

        image {
            width: 100%;
            height: 100%;
            opacity: 1;
        }
    }

    .title {
        font-size: $font-lg;
        color: $font-color-dark;
        line-height: 80upx;
    }

    .price-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10upx;
        font-size: 24upx;
        color: $font-color-light;
    }

    .price {
        font-size: $font-lg;
        color: $uni-color-primary;
        line-height: 1;

        &:before {
            content: "￥";
            font-size: 26upx;
        }
    }
}
</style>